<template>
  <a-drawer
    title="新增住户"
    :maskClosable="false"
    width=750
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="rsAddVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-form-item label='住户姓名' v-bind="formItemLayout">
        <a-input v-decorator="['rsName',
                  {rules: [
                    { required: true, message: '住户姓名不能为空'},
                    { max: 20, message: '长度不能超过50个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='民族' v-bind="formItemLayout">
        <a-input v-decorator="['nation',
                   {rules: [
                    { required: true, message: '民族不能为空'},
                    { max: 20, message: '长度不能超过20个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='政治面貌' v-bind="formItemLayout">
        <a-select v-decorator="['politics',
                  {rules: [
                    { required: true, message: '政治面貌不能为空'},
                    { max: 50, message: '长度不能超过50个字符'}
                  ],
                  initialValue: '群众'}]">
          <a-select-option value="共青团员">
            共青团员
          </a-select-option>
          <a-select-option value="中共党员">
            中共党员
          </a-select-option>
          <a-select-option value="群众">
            群众
          </a-select-option>
          <a-select-option value="民革党员">
            民革党员
          </a-select-option>
          <a-select-option value="民盟盟员">
            民盟盟员
          </a-select-option>
          <a-select-option value="民建会员">
            民建会员
          </a-select-option>
          <a-select-option value="民进会员">
            民进会员
          </a-select-option>
          <a-select-option value="农工党党员">
            农工党党员
          </a-select-option>
          <a-select-option value="致公党党员">
            致公党党员
          </a-select-option>
          <a-select-option value="九三学社社员">
            九三学社社员
          </a-select-option>
          <a-select-option value="台盟盟员">
            台盟盟员
          </a-select-option>
          <a-select-option value="无党派人士">
            无党派人士
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label='所属支部' v-bind="formItemLayout">
        <a-input v-decorator="['politicsBranch',
                  {rules: [
                    { max: 50, message: '长度不能超过50个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='性别' v-bind="formItemLayout">
        <a-radio-group v-decorator="['ssex',
                  {rules: [
                    { required: true, message: '性别不能为空'},
                  ],
                  initialValue: '1'}]">
          <a-radio value="1">
            男
          </a-radio>
          <a-radio value="0">
            女
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label='身份证号' v-bind="formItemLayout">
        <a-input v-decorator="['cardId',
                  {rules: [
                    { required: true, message: '身份证号不能为空'},
                    { max: 18, message: '长度不能超过18个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='联系方式' v-bind="formItemLayout">
        <a-input v-decorator="['mobile',
                  {rules: [
                    { required: true, message: '联系方式不能为空'},
                    { max: 30, message: '长度不能超过30个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='户籍所在地' v-bind="formItemLayout">
        <a-input v-decorator="['censusAdr',
                  {rules: [
                    { max: 50, message: '户籍所在地不能超过50个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='就业就学单位' v-bind="formItemLayout">
        <a-input v-decorator="['workUnit',
                  {rules: [
                    { max: 30, message: '长度不能超过30个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='文化程度' v-bind="formItemLayout">
        <a-select v-decorator="['culture',
                  {rules: [
                    { max: 50, message: '长度不能超过50个字符'}
                  ]}]">
          <a-select-option value="研究生">
            研究生
          </a-select-option>
          <a-select-option value="本科">
            本科
          </a-select-option>
          <a-select-option value="大专">
            大专
          </a-select-option>
          <a-select-option value="中专">
            中专
          </a-select-option>
          <a-select-option value="技工学校">
            技工学校
          </a-select-option>
          <a-select-option value="高中">
            高中
          </a-select-option>
          <a-select-option value="初中">
            初中
          </a-select-option>
          <a-select-option value="小学">
            小学
          </a-select-option>
          <a-select-option value="文盲">
            文盲
          </a-select-option>
          <a-select-option value="半文盲">
            半文盲
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label='外出务工地点' v-bind="formItemLayout">
        <a-input v-decorator="['workAdr',
                  {rules: [
                    { max: 30, message: '外出务工地点不能超过30个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='收入（元）' v-bind="formItemLayout">
        <a-input v-decorator="['income',
                  {rules: [
                    { max: 30, message: '收入（元）不能超过30个字符'}
                  ]}]"/>
      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}

export default {
  name: 'RsAdd',
  props: {
    rsAddVisiable: {
      default: false
    }
  },
  data () {
    return {
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      tResident: {}
    }
  },
  methods: {
    reset () {
      this.loading = false
      this.tResident = {}
      this.form.resetFields()
    },
    onClose () {
      this.reset()
      this.$emit('close')
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.setRsFields()
          let cardId = this.tResident.cardId
          if (!(/^[1-9][0-9]{5}(18|19|20)[0-9]{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)[0-9]{3}([0-9]|(X|x))$/.test(cardId)) && !(/^[1-9][0-9]{5}[0-9]{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)[0-9]{2}[0-9]$/.test(cardId))) {
            this.$message.error('您输入的身份证号不符合规则')
            return
          }
          // let birthday = cardId.length === 15 ? `19${cardId.substring(6, 12)}` : `${cardId.substring(6, 14)}`
          // this.tResident.birthday = birthday
          this.loading = true
          this.$post('tResident', {
            ...this.tResident
          }).then(() => {
            this.reset()
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    setRsFields () {
        let values = this.form.getFieldsValue(['rsName', 'nation', 'politics', 'politicsBranch', 'ssex', 'cardId', 'mobile', 'censusAdr', 'workUnit', 'culture', 'workAdr', 'income'])
        if (typeof values !== 'undefined') {
            Object.keys(values).forEach(_key => { this.tResident[_key] = values[_key] })
        }
    }
  },
  watch: {
    rsAddVisiable () {
    }
  }
}
</script>
